<template>
  <div class="login">
    <TopNav />
    <div class="login-box">
      <div class="title-box">
        <div class="title-top">欢迎回来</div>
        <div class="title-bottom">Please login to your accounts</div>
      </div>

      <div class="form-box">
        <van-field
          v-model="userInfo.phone"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
        />
        <van-field
          v-model="userInfo.password"
          :type="isText ? 'text' : 'password'"
          label="密码"
          placeholder="请输入密码"
          :right-icon="isText ? 'eye-o' : 'closed-eye'"
          @click-right-icon="triggerType"
        />

        <div class="forget" @click="forgetPassword">
          <span>忘记密码？</span>
        </div>

        <div class="btns">
          <van-button round block color="#9C623A" @click="login"
            >登&nbsp;录</van-button
          >
          <van-button
            class="register-btn"
            type="default"
            round
            block
            @click="OpenShow"
            >注&nbsp;册</van-button
          >
        </div>
      </div>
      <van-popup v-model="isOpenShow" position="bottom" closeable>
        <div class="register">
          <div class="text">注册</div>
          <div class="form-box">
            <van-field
              v-model="registerInfo.phone"
              type="tel"
              label="手机号"
              placeholder="请输入手机号"
            />
            <van-field
              v-model="registerInfo.password"
              :type="isText ? 'text' : 'password'"
              label="密码"
              placeholder="请输入密码 (5到13位)"
              :right-icon="isText ? 'eye-o' : 'closed-eye'"
              @click-right-icon="triggerType"
            />

            <van-field
              v-model="registerInfo.nickName"
              type="tel"
              label="名称"
              placeholder="请输入名称 (1到10位)"
            />

            <div class="btns">
              <van-button
                class="register-btn"
                type="default"
                round
                block
                @click="register"
                color="#9C623A"
                >注&nbsp;册</van-button
              >
            </div>
          </div>
        </div>
      </van-popup>
      <van-popup v-model="isOpenShowForget" position="bottom" closeable>
        <div class="forget">
          <div class="text">找回密码</div>
          <div class="findPhone">
            <van-field
              v-model="rephone"
              label="手机号"
              placeholder="请输入注册时的手机号"
            />
          </div>
          <van-field
            v-model="email"
            type="tel"
            label="邮箱地址"
            placeholder="请输入邮箱"
          />
          <div class="validbox">
            <van-field
              v-model="sms"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  :disabled="isdisabled"
                  @click="sendEmail"
                  >发送验证码</van-button
                >
              </template>
            </van-field>
            <van-field
              v-model="newpassword"
              :type="isText ? 'text' : 'password'"
              label="新密码"
              placeholder="请输入密码 (5到13位)"
              :right-icon="isText ? 'eye-o' : 'closed-eye'"
              @click-right-icon="triggerType"
            />
          </div>

          <div class="btn">
            <van-button
              type="primary"
              block
              color="#7F2F21"
              round
              @click="findPassword"
              >找回密码</van-button
            >
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import "../assets/less/login.less";
import { utils } from "../assets/js/utils";
import TopNav from "../components/TopNav.vue";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  components: {
    TopNav,
  },
  data() {
    return {
      // 用户信息
      userInfo: {
        phone: "",
        password: "",
      },

      //注册信息
      registerInfo: {
        phone: "",
        password: "",
        nickName: "",
      },

      // 是否显示注册
      isOpenShow: false,

      // 是否显示忘记密码框
      isOpenShowForget: false,

      //切换图标 密码框是否明文
      isText: false,

      // 注册时的手机号
      rephone: "",

      // 找回密码的新密码
      newpassword: "",

      // 是否禁用按钮
      isdisabled: false,

      // 邮箱数据
      email: "",

      // 邮箱验证码数据
      sms: "",
    };
  },
  created() {
    this.changeShopBag(0);
    this.changeIsShopBag(false);
  },
  methods: {
    ...mapMutations(["changeShopBag", "changeIsShopBag"]),
    // 是否显示注册
    OpenShow() {
      this.isOpenShow = true;
    },
    //切换图标 密码框是否明文
    triggerType() {
      this.isText = !this.isText;
    },
    // 注册
    register() {
      let o = {
        phone: {
          value: this.registerInfo.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "请输入正确的手机格式",
        },
        password: {
          value: this.registerInfo.password,
          reg: /^[A-Za-z]\w{5,13}$/,
          errorMsg: "密码支持字母数字_组合,首字母必须是字母",
        },
        nickName: {
          value: this.registerInfo.nickName,
          reg: /^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/,
          errorMsg: "名称支持汉字字母数字组合",
        },
      };

      // 验证
      if (!utils.verifyFrom(o)) {
        return;
      }

      // 发送请求
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/register",
        data: {
          appkey: this.appkey,
          nickName: this.registerInfo.nickName,
          password: this.registerInfo.password,
          phone: this.registerInfo.phone,
        },
      })
        .then((result) => {
          // console.log(result);
          this.$toast.clear(); //关闭加载块
          if (result.data.code == 100) {
            this.isOpenShow = false;
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            for (let key in this.registerInfo) {
              this.registerInfo[key] = "";
            }
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 登录
    login() {
      let o = {
        phone: {
          value: this.userInfo.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "请输入正确的手机格式",
        },
        password: {
          value: this.userInfo.password,
          reg: /^[A-Za-z]\w{5,13}$/,
          errorMsg: "密码支持字母数字_组合,首字母必须是字母",
        },
        nickName: {
          value: this.userInfo.nickName,
          reg: /^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/,
          errorMsg: "名称支持汉字字母数字组合",
        },
      };

      // 验证
      if (!utils.verifyFrom(o)) {
        return;
      }

      // 发生请求
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/login",
        data: {
          appkey: this.appkey,
          password: this.userInfo.password,
          phone: this.userInfo.phone,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code == 200) {
            this.$cookies.set("tokenString", result.data.token, "1d");
            return this.$router.push({ path: "/" });
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 显示忘记密码框
    forgetPassword() {
      this.isOpenShowForget = true;
    },

    // 找回密码
    findPassword() {
      this.checkValid();
      // 发送请求
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/retrievePassword",
        data: {
          appkey: this.appkey,
          phone: this.rephone,
          password: this.newpassword,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear(); //关闭加载块
          if (result.data.code == "L001") {
            this.isOpenShowForget = false;
          }
          this.$toast({
            message: result.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 发送邮箱
    sendEmail() {
      if (this.email === "") {
        return;
      }
      // 发送请求
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/emailValidCode",
        data: {
          appkey: this.appkey,
          email: this.email,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear(); //关闭加载块
          if (result.data.code == "J001") {
          }
          this.$toast({
            message: result.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 验证验证码
    checkValid() {
      // 发送请求
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/checkValidCode",
        data: {
          appkey: this.appkey,
          validCode: this.sms,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear(); //关闭加载块
          if (result.data.code == "K001") {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
  },
};
</script>
